<script lang="ts" setup>
// 引入 echarts
import { BuildingRechargeInfo } from '@/assets/api/electricitydataanalysisservice_0_0_1';
import { fitChartSize } from '@/utils/flex-size-utrils';
import * as echarts from 'echarts';
import { onBeforeUnmount, onMounted, ref, watch } from 'vue';
// 创建 dom 的对象
const chart = ref<HTMLDivElement>();

// chart 的对象实例
let myChart: echarts.ECharts | undefined;

const props = defineProps<{
    building_recharge_datas: Array<BuildingRechargeInfo>
}>();


const datas: {
    xaxis_data: Array<string>,
    series1_data: Array<any>,
    series2_data: Array<any>
} = {
    xaxis_data: [],
    series1_data: [],
    series2_data: [],
}

watch(() => props.building_recharge_datas, () => {
    datas.xaxis_data = []
    datas.series1_data = []
    datas.series2_data = []
    // 构建字符串
    for (let ele of props.building_recharge_datas) {
        datas.xaxis_data.push(ele.building);
        datas.series1_data.push(ele.recharge_energy);
        datas.series2_data.push(ele.recharge_amount);
    }
    doRender();
});

const doRender = () => {
    let option = {
        grid: {
            left: '2%',         // 设置左边距为容器宽度的 10%
            right: '2%',        // 设置右边距为容器宽W度的 10%
            top: '20%',          // 设置上边距为容器高度的 15%
            bottom: '0%',       // 设置下边距为容器高度的 15%
            containLabel: true   // 确保轴标签显示完整
        },
        legend: {
            data: ['充值电量', '充值金额'],
            textStyle: {
                fontSize: fitChartSize(14), // 标题的文字大小
                color: "white"
            }
        },
        // 配置 X 轴
        xAxis: {
            type: 'category',  // X 轴类型为类目轴，适合离散型数据
            axisLabel: {
                fontSize: fitChartSize(14), // 字体大小
            },
            splitLine: {
                show: false
            },
            axisTick: {
                show: false // 去掉x轴的刻度线
            },
            axisLine: {
                lineStyle: {
                    color: 'white' // X轴的颜色
                },
            },
            data: datas.xaxis_data
        },
        // 配置 Y 轴
        yAxis: {
            type: 'value',      // Y 轴类型为数值轴，适合连续型数据
            axisLabel: {
                fontSize: fitChartSize(14) // 字体大小
            },
            splitLine: {
                show: false
            },
            axisTick: {
                show: false // 去掉x轴的刻度线
            },
            axisLine: {
                lineStyle: {
                    color: 'white' // X轴的颜色
                },
            },
        },
        // 配置系列数据
        series: [
            {
                name: "充值电量",

                data: datas.series1_data,
                type: 'bar',    // 系列类型为柱状图
                itemStyle: {
                    color: "#00E2E7"
                }
            },
            {
                name: "充值金额",
                data: datas.series2_data,
                type: 'bar',    // 系列类型为柱状图
                itemStyle: {
                    color: "rgb(255, 200, 0)",
                }
            }
        ],

    };
    // 使用配置项生成图表
    myChart.setOption(option);
}
// 
const onHandlerWindowResize = () => {
    if (!myChart) {
        return;
    }
    // 重新设置字体大小   
    doRender();
    // 调整大小
    myChart.resize();
};

// 组件加载完成后加载的对象
onMounted(() => {
    // 固定用法，需要使用 chart.value
    myChart = echarts.init(chart.value);
    // 渲染出来
    doRender();
    // 监听窗口大小变化的事件
    window.addEventListener('resize', onHandlerWindowResize);
});
onBeforeUnmount(() => {
    // 组件销售时,退出监听
    window.removeEventListener('resize', onHandlerWindowResize);
});
</script>

<template>
    <!-- ref 是一个 就是获取到 dom 对象 -->
    <div class="year-revenu-chart-wrapper">
        <div ref="chart" class="year-revenu-chart"></div>
    </div>
</template>

<style lang="scss" scoped>
@import "@/assets/scss/flex-layout.scss";

.year-revenu-chart-wrapper {
    width: 100%;
    height: 100%;
    background: transparent;
    padding: vw(10);

    .year-revenu-chart {
        width: 100%;
        height: 100%;
        padding: vw(10);
        background: rgba(42, 30, 55, 0.3);
        border-radius: 8px;  // 圆角
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); // 加阴影
    }
}
</style>